 /* 可以设置不同的进入和离开动画 */
 /* 从上到下 */
 .list-enter {
   opacity: 0;
   transform: translateY(100%);
 }

 .list-enter-active {
   transition: .3s;
 }

 /* enter-to其实可以不用写, 没有显性写明，就是默认的opacity: 1;transform: none; */
 .list-enter-to {
   opacity: 1;
   transform: translateY(0);
 }

 /*  加延时 */
 .list-enter-active:nth-child(6n+2) {
   transition-delay: .3s;
 }

 .list-enter-active:nth-child(6n+3) {
   transition-delay: .5s;
 }

 .list-enter-active:nth-child(6n+4) {
   transition-delay: .7s;
 }

 .list-enter-active:nth-child(6n+5) {
   transition-delay: .9s;
 }

 .list-enter-active:nth-child(6n+6) {
  transition-delay: .9s;
}

/* 从左到右 */
.listLeft-enter {
  opacity: 0;
  transform: translateX(100%);
}

.listLeft-enter-active {
  transition: .3s;
}

/* enter-to其实可以不用写, 没有显性写明，就是默认的opacity: 1;transform: none; */
.listLeft-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/*  加延时 */
.listLeft-enter-active:nth-child(6n+2) {
  transition-delay: .3s;
}

.listLeft-enter-active:nth-child(6n+3) {
  transition-delay: .5s;
}

.listLeft-enter-active:nth-child(6n+4) {
  transition-delay: .7s;
}

.listLeft-enter-active:nth-child(6n+5) {
  transition-delay: .9s;
}

.listLeft-enter-active:nth-child(6n+6) {
 transition-delay: .9s;
}


 /*  多向动画 */
 .left-enter-to {
   transform: translateX(0);
   opacity: 1;
 }

 .left-enter {
   transform: translateX(-30px);
   opacity: 0;
 }

 /* 右 */
 .right-enter-to {
   transform: translateX(0);
   opacity: 1;
 }

 .right-enter {
   transform: translateX(30px);
   opacity: 0;
 }

 /* 下 */
 .bottom-enter {
   opacity: 0;
   transform: translateY(30px);
 }

 .bottom-enter-to {
   opacity: 1;
   transform: translateY(0);
 }

 /* 上 */
 .top-enter-to {
   transform: translateX(0);
   opacity: 1;
 }

 .top-enter {
   transform: translateY(-30px);
   opacity: 0;
 }

 .left-enter-active,
 .right-enter-active,
 .bottom-enter-active,
 .top-enter-active {
   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }